<template>
  <div>
    <div class="recommendPage">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="box">
            <div class="sign_live__tit wow">
              <h2 class="icon_sign icon_live_tit">
                成为签约主播，用才华点亮世界
              </h2>
              <a href="#" class="btn_apply">申请成为签约主播</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <!-- <div class="zhecaoceng">
                    </div> -->
          <div class="box sign_live__mask">
            <div class="mod_wrap">
              <ul class="sign_show">
                <li class="sign_show__item">
                  <h3 class="icon_sign icon_room_t1">快速积累人气</h3>
                  <p class="sign_show__desc">
                    收获人气及粉丝，全民K歌及腾讯音乐娱乐集团体系亿级流量扶持
                  </p>
                </li>
                <li class="sign_show__item">
                  <h3 class="icon_sign icon_room_t2">丰厚分成福利</h3>
                  <p class="sign_show__desc">
                    唱歌直播获得礼物，可以获得丰厚的利益分成
                  </p>
                </li>
                <li class="sign_show__item">
                  <h3 class="icon_sign icon_room_t3">结识人脉资源</h3>
                  <p class="sign_show__desc">
                    大平台，各类顶级合作机会，开启您的星光大道
                  </p>
                </li>
              </ul>
              <a href="#" class="btn_apply">申请成为签约主播</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="box sign_live__mask">
            <div class="mod_wrap">
              <h3 class="icon_sign icon_room_sub">签约歌房入驻条件</h3>
              <ul class="sign_list sign_list__room">
                <li class="sign_list__item">
                  <div class="sign_list__top">
                    <h3 class="icon_sign icon_num1">1</h3>
                  </div>
                  <p class="sign_list__desc">签约账号为家族族长</p>
                </li>
                <li class="sign_list__item">
                  <div class="sign_list__top">
                    <h3 class="icon_sign icon_num2">2</h3>
                  </div>
                  <p class="sign_list__desc">家族人数系统达到200人</p>
                </li>
                <li class="sign_list__item">
                  <div class="sign_list__top">
                    <h3 class="icon_sign icon_num3">3</h3>
                  </div>
                  <p class="sign_list__desc">
                    喜欢唱歌,人脉广泛,有能力组织运营歌房团队的优先
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.min.css";
import "swiper/dist/js/swiper.min";

export default {
  components: { swiper, swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  data() {
    return {
      swiperOption: {
        mousewheel: true,
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  mounted() {
    new this.$wow.WOW().init();
  },
};
</script>

<style scoped>
/* 侧边滑动桥 */
.swiper-pagination-bullet {
  width: 4px;
  height: 60px;
  margin: 5px 0;
  border-radius: 99px;
  background-color: #ffff;
  font-size: 0;
  line-height: 0;
}

.sign_list__desc {
  padding: 20px;
  font-size: 22px;
  color: #fff;
}

.icon_num1 {
  width: 78px;
  height: 47px;
  background-position: -510px -229px;
}

.icon_num2 {
  width: 78px;
  height: 47px;
  background-position: -510px -296px;
}

.icon_num3 {
  width: 78px;
  height: 47px;
  background-position: -510px -363px;
}

.sign_list__top {
  height: 60px;
  padding-top: 30px;
  background-color: #fff;
}

.sign_list__item:nth-child(1) {
  animation: fadeInRight 1s ease-in-out forwards;
}

.sign_list__item:nth-child(2) {
  animation: fadeInRight 1s ease-in-out 0.2s forwards;
}

.sign_list__item:nth-child(3) {
  animation: fadeInRight 1s ease-in-out 0.4s forwards;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.sign_list__item {
  opacity: 0;
  position: relative;
  display: block;
  width: 300px;
  height: 360px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 3px solid #fff;
  overflow: hidden;
}

.sign_list__room .sign_list__item {
  height: 280px;
}

.sign_list {
  position: relative;
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon_room_sub {
  width: 307px;
  height: 30px;
  background-position: -10px -900px;
  position: relative;
  top: -70px;
}

.sign_live__mask:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.85;
  background-color: #0f0933;
}

.box {
  width: 100%;
  height: 720px;
  display: block;
  background-image: url(./img/gefang1.png);
  background-size: 100%;
}

.sign_show__item {
  opacity: 0;
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 8px;
  padding-top: 60px;
  overflow: hidden;
}

.icon_sign {
  display: block;
  margin: 0 auto;
  background-image: url(./img/shiliangtu.png);
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
}

.icon_room_t2 {
  width: 230px;
  height: 128px;
  background-position: -10px -10px;
}

.icon_room_t3 {
  width: 230px;
  height: 128px;
  background-position: -10px -158px;
}

.icon_room_t1 {
  width: 230px;
  height: 128px;
  background-position: -10px -306px;
}

.sign_show__item:nth-child(1) {
  animation: fadeInRight 1s ease-in-out forwards;
}

.sign_show__item:nth-child(2) {
  animation: fadeInRight 1s ease-in-out 0.2s forwards;
}

.sign_show__item:nth-child(3) {
  animation: fadeInRight 1s ease-in-out 0.4s forwards;
}

.sign_show__desc {
  margin: 40px 20px 0;
  font-size: 17px;
  color: #999;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.mod_wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.sign_show {
  position: relative;
  width: 1000px;
  display: flex;
  padding-top: 75px;
  align-items: center;
  justify-content: space-between;
}

.btn_apply {
  animation: fadeInUp 1s ease-in-out 0.3s forwards;
  opacity: 0;
  display: block;
  width: 314px;
  height: 83px;
  line-height: 83px;
  border-radius: 83px;
  margin: 90px auto 0;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(
    to right,
    #466fe3 0,
    #b30fa0 55%,
    #e75ea8 100%
  );
}

.icon_live_tit {
  width: 617px;
  height: 190px;
  background-position: 0 -500px;
}

.icon_sign {
  display: block;
  margin: 0 auto;
  background-image: url(./img/shiliangtu.png);
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
}

.sign_live__tit {
  padding-top: 140px;
  animation: fadeInUp 1s ease-in-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;

    transform: translateY(0);
  }
}

.recommendPage {
  position: relative;
  width: 100%;
  height: 720px;
}
</style>